html {
  font-size: 12PX;
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667PX;
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size: 48PX;
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size: 50PX;
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size: 52.4PX;
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size: 54.93PX;
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size: 55.2PX;
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size: 64PX;
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size: 72PX;
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size: 85.33PX;
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size: 96PX;
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size: 102.4PX;
    }
}

@media screen and (min-width: 769px) {
     html {
        font-size: 102.4PX;
        #app {
            width: 768PX;
            margin: 0 auto
        }
    }
}

.clearfix:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}
input,button,select,textarea{outline:none}

/* page change   sass语法$ --*/ 
$--transition-time: 350ms;
.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
  will-change: transform;
  transition: all $--transition-time;
  position: absolute;
  height: 100%;
  backface-visibility: hidden;
  perspective: 1000;
}
.back-enter {
  opacity: 0.75;
  transform: translate3d(-35%, 0, 0)!important;
}
.back-enter-active {
  z-index: -1!important;
  transition: all $--transition-time linear;
}
.back-leave-active {
  transform: translate3d(100%, 0, 0)!important;
  transition: all $--transition-time linear;
}
.forward-enter {
  transform: translate3d(100%, 0, 0)!important;
}
.forward-enter-active {
  transition: all  $--transition-time linear;
}
.forward-leave-active {
  z-index: -1;
  opacity: 0.65;
  transform: translate3d(-35%, 0, 0)!important;
  transition: all $--transition-time linear;
}

.slide-left-leave-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-right-enter-active{
  transition: all $--transition-time;
}
.slide-left-enter, .slide-right-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
